.content {
    width: 100%;
}

.time-line {
    display      : flex;
    width        : 90%;
    margin-left  : auto;
    margin-right : auto;
    align-items  : flex-end;
    margin-bottom: 24px;
    cursor       : pointer;
    height       : 30px;

    .fragment {
        height: 8px;

        &:hover {
            height: 24px;
        }
    }

    .big-h {
        height: 24px;
    }
}

.axis {
    color         : #303133;
    display       : flex;
    flex-direction: column;
    align-items   : center;

    .scale {}

    .scale-panel {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        width          : 100%;
    }

    .line {
        margin-bottom: 20px;
        width        : 90%;
        position     : relative;
        border-bottom: 1px solid #C4C4C4;

        .scale-flag {
            background-color: #303133;
            width           : 2px;
            height          : 10px;
            position        : absolute;
        }

        .left {
            top: -5px;
        }

        .center {
            top : -5px;
            left: 50%;
        }

        .right {
            top  : -5px;
            right: 0px;
        }

    }
}

.color-green {
    background-color: #45C650;
}

.color-red {
    background-color: #FF4C52;
}

.tagging {
    display    : flex;
    align-items: center;
    color      : #606266;
    margin-top : 30px;
    margin-left: 5%;

    span {
        margin-right: 16px;
    }
}


.flag {
    height       : 10px;
    width        : 16px;
    border-radius: 4px;
    margin       : 0px 5px;
}

.padding-s {
    padding: 3px 12px;
}